<template>
    <div class="logincontainer">
        <el-dialog class="logindialog" :show-close="false" v-model="UseLogin" width="auto" align-center>
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header ">
                    <h4 :id="titleId" :class="titleClass">用户登录</h4>
                    <el-button type="danger" @click="close">关闭</el-button>
                </div>
            </template>
            <template #footer="{ close }">
                <div class="my-footer">
                    <el-button type="primary" @close="close">关闭窗口</el-button>
                </div>
            </template>
            <div class="mainbody">
                <div class="left">
                    <div>
                        <el-form>
                            <el-form-item label="手机号">
                                <el-input placeholder="请在此输入您的手机号" :prefix-icon="User"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input placeholder="请在此输入您的验证码" :prefix-icon="Lock"> </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button>获取验证码</el-button>
                            </el-form-item>
                            <el-button style="width: 100%;" type="primary">登陆</el-button>
                        </el-form>
                    </div>
                    <div class="btnswitch">
                        <h1>微信扫码登录</h1>
                        <svg t="1707137984061" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3635" width="32" height="32">
                            <path
                                d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
                                fill="#09BB07" p-id="3636"></path>
                        </svg>
                    </div>
                </div>
                <div class="right">
                    <div class="codes">
                        <div class="leftcode">
                            <img src="@\assets\images\code_app.png">
                            <div class="son">
                                <svg t="1707137984061" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3635" width="16" height="16">
                                    <path
                                        d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
                                        fill="#cdcdcd" p-id="3636"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>“快速预约挂号”</p>
                            </div>
                            <div>
                            </div>
                        </div>
                        <div class="rightcode">
                            <img src="@\assets\images\code_login_wechat.png">
                            <div class="son">
                                <svg t="1707144248728" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2746" width="16" height="16">
                                    <path
                                        d="M736.653061 929.959184H287.346939c-45.97551 0-83.591837-37.616327-83.591837-83.591837V177.632653c0-45.97551 37.616327-83.591837 83.591837-83.591837h449.306122c45.97551 0 83.591837 37.616327 83.591837 83.591837v668.734694c0 45.97551-37.616327 83.591837-83.591837 83.591837zM287.346939 135.836735c-22.987755 0-41.795918 18.808163-41.795919 41.795918v668.734694c0 22.987755 18.808163 41.795918 41.795919 41.795918h449.306122c22.987755 0 41.795918-18.808163 41.795919-41.795918V177.632653c0-22.987755-18.808163-41.795918-41.795919-41.795918H287.346939z"
                                        fill="#333333" p-id="2747"></path>
                                    <path
                                        d="M616.489796 815.020408H407.510204c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h208.979592c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                                        fill="#333333" p-id="2748"></path>
                                </svg>
                                <p>扫一扫下载</p>
                                <p>“预约挂号”APP</p>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                    <div class="flags">
                        <h1>尚医通官方指定平台</h1>
                        <h1>快速挂号 安全放心</h1>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
 
<script setup lang="ts">
import { ref } from "vue"
import { User, Lock } from '@element-plus/icons-vue'
let UseLogin = ref(true)


</script>
 
<style scoped lang="scss">
.logincontainer {

    // 深度选择器，添加顶部和底部线条
    :deep(.el-dialog__body) {
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    }

    .my-header {
        display: flex;
        justify-content: space-between;
        gap: 16px;
    }

    .logindialog {
        min-width: 800px;

        .mainbody {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            gap: 10px;

            .left {
                border: 1px solid #cccccc;
                padding: 20px;
                margin-left: 10px;
                display: flex;
                flex-direction: column;

                .btnswitch {
                    margin-top: 10px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    svg {
                        cursor: pointer;
                    }
                }
            }

            .right {
                display: flex;
                flex-direction: column;
                align-items: center;

                .codes {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    gap: 10px;

                    .son {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        line-height: 20px;
                    }

                    .leftcode {
                        margin: 10px;
                        margin-top: 0px;

                        img {
                            width: 130px;
                            height: 130px;
                        }
                    }

                    .rightcode {
                        margin: 10px;
                        margin-top: 0px;

                        img {
                            width: 130px;
                            height: 130px;
                        }
                    }
                }
            }
        }
    }

    .flags {
        display: flex;
        flex-direction: column;
        align-items: center;

        h1 {
            font-size: 20px;
            font-weight: 900;
            line-height: 30px;
        }
    }
}
</style>